<script setup>
// 第三方模块
import { useRoute, useRouter } from "vue-router";
import { computed, ref } from "vue";

const route = useRoute();
const router = useRouter();
// 自定义模块
import CartCard from "@/components/cart/CartCard.vue";
import useCartStore from "@/stores/cart.js";
import useOrderStore from "@/stores/order.js";
import useUserStore from "@/stores/user.js";
const cartStore = useCartStore();
const orderStore = useOrderStore();
const userStore = useUserStore();

// console.log(route.query.shopName);

// 查询购物车
const shopCart = computed(() => {
  return cartStore.cartList.find((item) => (item.name = route.query.shopName));
});

// 被选中商品列表
const list = computed(() => {
  if (shopCart.value) {
    return shopCart.value.list.filter((item) => item.checked);
  } else {
    return [];
  }
});
// console.log(cart);

// 总价
const total = computed(() => {
  return list.value
    .reduce((sum, item) => sum + item.price * item.number, 0)
    .toFixed(2);
});

// 总件数
const number = computed(() => {
  return list.value.reduce((sum, item) => sum + item.number, 0);
});

// 跳转获取地址
const getCurAddress = () => {
  router.push({
    name: "ress",
  });
};

// 获取当前用户的信息
const userInfo = computed(() => {
  return userStore.userList.find((item) => item.name === "zhangsan");
});

// 获取当前地址
const currentAddress = computed(() => {
  return userInfo.value.currentAddress;
});

// 蒙版切换
const isShow = ref(false);

const submitOrder = () => {
  // 定义订单结构
  const order = {
    user: "",
    shopName: "",
    shopCartList: [],
    total: "",
    number: "",
  };

  // 对订单数据赋值
  order.user = "zhangsan";
  order.shopName = route.query.shopName;
  order.shopCartList = list.value;
  order.total = total.value;
  order.number = number.value;

  // 加入订单仓库中
  orderStore.orderList.push(order);
  console.log(orderStore.orderList);

  // 跳转
  router.push({
    name: "order",
  });

  // 删除购物车
  shopCart.value.list.forEach((item) => (item.number = 0));
  cartStore.cartList = cartStore.cartList.filter(
    (item) => item.name != route.query.shopName
  );
};

// 返回
const back = () => {
  router.go(-1);
};
</script>

<template>
  <div class="order_confirmation">
    <div class="order_confirmation_header">
      <div class="order_confirmation_header_title">
        <span class="iconfont title_back" @click="back">&#xe697;</span>
        <div class="title_text">确定订单</div>
      </div>

      <div class="order_confirmation_header_address">
        <div class="address_title">收货地址</div>
        <div class="current_address" @click="getCurAddress">
          <div class="current_address_info" v-if="currentAddress">
            <div>{{ currentAddress.address_text }}</div>
            <div>{{ currentAddress.name }} {{ currentAddress.phone }}</div>
          </div>
          <div class="current_address_info" v-else>暂无收货地址</div>
          <div class="iconfont current_address_icon">&#xe697;</div>
        </div>
      </div>
    </div>

    <div class="order_confirmation_content" v-if="shopCart">
      <CartCard :shopCartInfo="shopCart" />
    </div>

    <div class="order_confirmation_footer">
      <div class="total_price">
        实付金额: <b>￥{{ total }}</b>
      </div>

      <div class="submit" v-if="currentAddress" @click="isShow = !isShow">
        提交订单
      </div>
    </div>
    <!-- 蒙层 -->
    <div class="mask" v-if="isShow">
      <div class="mask_content">
        <div class="mask_content_title">确认要离开收银台?</div>
        <div class="mask_content_desc">请尽快完成支付,否则将被取消</div>
        <div class="mask_content_btn">
          <div class="btn cancel" @click="isShow = !isShow">取消订单</div>
          <div class="btn confirm" @click="submitOrder">确定支付</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
.order_confirmation {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #eee;

  &_header {
    padding: 0.18rem;
    height: 1.6rem;
    background-image: linear-gradient(
      0deg,
      rgba(0, 145, 255, 0) 4%,
      #0091ff 50%
    );
    background-size: 100% 1.6rem;
    background-repeat: no-repeat;

    &_title {
      display: flex;
      color: $bgColor;

      .title_back {
        font-size: 0.22rem;
      }
      .title_text {
        flex: 1;
        text-align: center;
        font-size: 0.16rem;
      }
    }
    &_address {
      padding: 0.18rem;
      background-color: $bgColor;
      margin-top: 0.28rem;
      line-height: 0.22rem;
      font-size: 0.16rem;
      color: $content_fontcolor;
      border-radius: 0.04rem;
      .address_title {
        margin-bottom: 0.18rem;
      }
      .current_address {
        display: flex;
        justify-content: space-between;

        &_info {
          div:last-child {
            font-size: 0.12rem;
          }
        }

        &_icon {
          transform: rotate(180deg);
          margin-right: 0.08rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
      }
    }
  }

  &_content {
    width: 100%;
    position: absolute;
    top: 2rem;
    bottom: 0.5rem;
    box-sizing: border-box;
    overflow-y: scroll;
  }

  &_footer {
    height: 0.5rem;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: $bgColor;
    line-height: 0.5rem;
    display: flex;

    .total_price {
      flex: 1;
      padding-left: 0.18rem;
    }
    .submit {
      width: 1rem;
      height: 0.5rem;
      background-color: $btn-bgColor;
      color: $bgColor;
      text-align: center;
      font-size: 0.14rem;
    }
  }

  // 蒙层
  .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999;
    background-color: rgba($color: #000000, $alpha: 0.5);
    display: flex;
    justify-content: center;
    align-items: center;

    &_content {
      width: 80%;
      padding: 0.24rem;
      box-sizing: border-box;
      background-color: $bgColor;
      border-radius: 0.04rem;
      text-align: center;

      &_title {
        font-size: 0.18rem;
        font-weight: bold;
        color: $content_fontcolor;
      }
      &_desc {
        margin: 0.12rem 0;
        line-height: 0.2rem;
        font-size: 0.14rem;
        color: $medium-fontColor;
      }
      &_btn {
        display: flex;
        justify-content: center;

        .btn {
          width: 0.8rem;
          height: 0.32rem;
          border-radius: 0.24rem;
          font-size: 0.14rem;
          line-height: 0.32rem;
        }
        .cancel {
          margin-right: 0.12rem;
          border: solid 0.01rem $btn-bgColor;
          color: $btn-bgColor;
        }
        .confirm {
          background-color: $btn-bgColor;
          color: $bgColor;
        }
      }
    }
  }
}
</style>